<template>
	<div class="address">
		<el-select v-model="form.province">
			<el-option
				v-for="item in Province"
				:label="item.name"
				:value="item.name"
			/>
		</el-select>
		<el-select v-model="form.city">
			<el-option v-for="item in cities" :label="item.name" :value="item.name" />
		</el-select>
		<el-select v-model="form.country">
			<el-option
				v-for="item in countries"
				:label="item.name"
				:value="item.name"
			/>
		</el-select>
		<el-select v-model="form.town">
			<el-option v-for="item in towns" :label="item.name" :value="item.name" />
		</el-select>
	</div>
</template>

<script>
// const Province = require('@/utils/address.json')
export default {
	data() {
		return {
			Province: [],
			form: {
				province: '',
				city: '',
				country: '',
				town: ''
			},
			cities: [],
			countries: [],
			towns: []
		}
	},
	created() {
		fetch('/insure/drivingins/China/province.json')
			.then((res) => res.json())
			.then((json) => {
				this.Province = json
			})
	},
	watch: {
		'form.province'(province) {
			this.form.city = ''
			this.cities = []
			if (province) {
				fetch('/insure/drivingins/China/' + province + '.json')
					.then((res) => res.json())
					.then((json) => {
						this.cities = json.children
					})
			}
		},
		'form.city'(city) {
			this.form.country = ''
			this.countries = []
			if (city) {
				this.countries = this.cities.find((ct) => ct.name === city).children
			}
		},
		'form.country'(country) {
			this.form.town = ''
			this.towns = []
			if (country) {
				this.towns = this.countries.find((ct) => ct.name === country).children
			}
		}
	},
	mounted() {},
	methods: {
		getStringValue({ split = '' }) {
			return Object.values(this.form).join(split)
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.address {
	display: inline-flex;

	> div {
		flex: 30% 1 1;
		&:not(:first-child) {
			margin-left: 3%;
		}
	}
}
</style>
